import { useRef } from 'react'
import { useInViewport } from 'ahooks'
import styles from './index.module.less'
import type { SwiperItemProps } from '../../teacher/interface'
// import { Space } from 'antd-mobile'

export const PlatformData = (props: SwiperItemProps) => {
    const isActive = props?.current === props?.itemIndex
    const ref = useRef<HTMLDivElement>(null)
    const [inViewport] = useInViewport(ref, {
        // 在Swiper下需要偏移才能才能正确获取`inViewport`状态
        rootMargin: '-5px',
    })

    if (!isActive && !inViewport) {
        return <div className={styles.page} />
    }

    return (
        <div className={styles.page}>
            <div className={styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>我们助力于师资提升</p>
                    <p style={{ marginTop: '8px' }}>
                        2期线上<span>《师说》精品直播</span> 马兰花创业培训讲师大赛赛事指导
                    </p>
                    <p style={{ marginTop: '8px' }}>《网创实操竞赛备赛指导》</p>
                    <p style={{ marginTop: '8px' }}>《单项作品赛全息解读》</p>

                    {/* <Space direction="vertical" style={{ marginTop: '8px' }}>
                        <p>《GYB/SYB 精品课》共4期</p>

                        <p>《网络创业培训（电商版）（直播版）》共10期</p>

                        <p>《讲师大赛专题训练营》共6期</p>

                        <p>《实战技能提升/创业拓展》共4期</p>
                    </Space> */}

                    <p style={{ marginTop: '16px' }}>
                        <span>28期《亿卓智库小课堂》 </span> 深度挖掘创业实战
                    </p>

                    <p style={{ marginTop: '16px' }}>
                        <span>19期《实操指导》</span>手把手带教平台操作
                    </p>
                </div>
            </div>

            <div className={styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <p>亿卓智库、网络创业培训公众号</p>
                    <p>视频号全年上新近200余份创业干货</p>
                    <p>教学课件、数据报告……</p>
                </div>
            </div>
        </div>
    )
}
